<script setup>
import { ref } from "vue";
const numbers = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
let numCounter = 10;

// 添加数字
function addNum() {
  numbers.value.splice(randomIndex(), 0, numCounter++);
}

// 删除数字
function removeNum() {
  numbers.value.splice(randomIndex(), 1);
}

// 生成随机位置
function randomIndex() {
  return Math.floor(Math.random() * numbers.value.length);
}
</script>

<template>
  <div class="app">
    <button @click="addNum">添加数字</button>
    <button @click="removeNum">删除数字</button>
    
    <TransitionGroup tag="p" name="zep">
      <span class="item" v-for="item in numbers" :key="item">
        {{ item }}
      </span>
    </TransitionGroup>
  </div>
</template>

<style>
.item {
  margin-right: 10px;
  display: inline-block;
}

.zep-enter-from,
.zep-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.zep-enter-to,
.zep-leave-from {
  opacity: 1;
  transform: translateY(0px); /* 修正字母O为数字0 */
}

.zep-enter-active,
.zep-leave-active {
  transition: all 1s ease;
}

.zep-leave-active {
  position: absolute;  /* 保证离开元素不占位 */
}

.zep-move {
  transition: transform 1s;
}
</style>